<ng-template #monthviewDefaultDisplayEventTemplate let-view="view" let-row="row" let-col="col">
    {{view.dates[row*7+col].label}}
</ng-template>
<ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail="showEventDetail" let-selectedDate="selectedDate"
             let-noEventsLabel="noEventsLabel">
    <ion-list class="event-detail-container" has-bouncing="false" *ngIf="showEventDetail" overflow-scroll="false">
        <ion-item *ngFor="let event of selectedDate?.events" (click)="eventSelected(event)">
                        <span *ngIf="!event.allDay" class="monthview-eventdetail-timecolumn">{{event.startTime|date: 'HH:mm'}}
                            -
                            {{event.endTime|date: 'HH:mm'}}
                        </span>
            <span *ngIf="event.allDay" class="monthview-eventdetail-timecolumn">{{allDayLabel}}</span>
            <span class="event-detail">  |  {{event.title}}</span>
        </ion-item>
        <ion-item *ngIf="selectedDate?.events.length==0">
            <div class="no-events-label">{{noEventsLabel}}</div>
        </ion-item>
    </ion-list>
</ng-template>
<ng-template #defaultAllDayEventTemplate let-displayEvent="displayEvent">
    <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
</ng-template>
<ng-template #defaultNormalEventTemplate let-displayEvent="displayEvent">
    <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
</ng-template>

<div [ngSwitch]="calendarMode" class="{{calendarMode}}view-container">
    <monthview *ngSwitchCase="'month'"
               [formatDay]="formatDay"
               [formatDayHeader]="formatDayHeader"
               [formatMonthTitle]="formatMonthTitle"
               [startingDayMonth]="startingDayMonth"
               [showEventDetail]="showEventDetail"
               [noEventsLabel]="noEventsLabel"
               [autoSelect]="autoSelect"
               [eventSource]="eventSource"
               [markDisabled]="markDisabled"
               [monthviewDisplayEventTemplate]="monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate"
               [monthviewInactiveDisplayEventTemplate]="monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate"
               [monthviewEventDetailTemplate]="monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate"
               [locale]="locale"
               [dateFormatter]="dateFormatter"
               [dir]="dir"
               [lockSwipeToPrev]="lockSwipeToPrev"
               [lockSwipes]="lockSwipes"
               (onRangeChanged)="rangeChanged($event)"
               (onEventSelected)="eventSelected($event)"
               (onTimeSelected)="timeSelected($event)"
               (onTitleChanged)="titleChanged($event)">
    </monthview>
    <weekview *ngSwitchCase="'week'"
              [formatWeekTitle]="formatWeekTitle"
              [formatWeekViewDayHeader]="formatWeekViewDayHeader"
              [formatHourColumn]="formatHourColumn"
              [startingDayWeek]="startingDayWeek"
              [allDayLabel]="allDayLabel"
              [hourParts]="hourParts"
              [eventSource]="eventSource"
              [markDisabled]="markDisabled"
              [weekviewAllDayEventTemplate]="weekviewAllDayEventTemplate||defaultAllDayEventTemplate"
              [weekviewNormalEventTemplate]="weekviewNormalEventTemplate||defaultNormalEventTemplate"
              [locale]="locale"
              [dateFormatter]="dateFormatter"
              [dir]="dir"
              [scrollToHour]="scrollToHour"
              [preserveScrollPosition]="preserveScrollPosition"
              [lockSwipeToPrev]="lockSwipeToPrev"
              [lockSwipes]="lockSwipes"
              (onRangeChanged)="rangeChanged($event)"
              (onEventSelected)="eventSelected($event)"
              (onTimeSelected)="timeSelected($event)"
              (onTitleChanged)="titleChanged($event)">
    </weekview>
    <dayview *ngSwitchCase="'day'"
             [formatDayTitle]="formatDayTitle"
             [formatHourColumn]="formatHourColumn"
             [allDayLabel]="allDayLabel"
             [hourParts]="hourParts"
             [eventSource]="eventSource"
             [markDisabled]="markDisabled"
             [dayviewAllDayEventTemplate]="dayviewAllDayEventTemplate||defaultAllDayEventTemplate"
             [dayviewNormalEventTemplate]="dayviewNormalEventTemplate||defaultNormalEventTemplate"
             [locale]="locale"
             [dateFormatter]="dateFormatter"
             [dir]="dir"
             [scrollToHour]="scrollToHour"
             [preserveScrollPosition]="preserveScrollPosition"
             [lockSwipeToPrev]="lockSwipeToPrev"
             [lockSwipes]="lockSwipes"
             (onRangeChanged)="rangeChanged($event)"
             (onEventSelected)="eventSelected($event)"
             (onTimeSelected)="timeSelected($event)"
             (onTitleChanged)="titleChanged($event)">
    </dayview>
</div>
